<template>
    <div id="app">
        <el-form ref="form" :model="editForm" label-width="200px" class="demo-ruleForm">

            <div style="width: 550px">
                <el-form-item label="新闻标题">
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>
            </div>

            <el-form-item label="新闻类别" prop="kid">
                <el-select v-model="editForm.kid" placeholder="请选择">
                    <el-option
                            v-for="item in kinds"
                            :key="item.id"
                            :label="item.kind"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="设置上传时间" prop="time">
                <el-date-picker
                        v-model="editForm.time"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <div style="width: 550px">
                <el-form-item label="新闻的详细内容">
                    <el-input type="textarea"  resize="none" :rows="5" v-model="editForm.content"></el-input>
                </el-form-item>
            </div>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    export default {
        name: "releaseNews",
        data(){
            return{
                kinds:[],
                editForm:{},
            }
        },
        created(){
            this.kindInit();
        },
        methods: {
            kindInit(){
                this.$http.post("/system/newsKind/list").then(resp=>{
                    console.log(resp)
                    this.kinds=resp.data.data;
                });
            },
            onSubmit(){
                this.$http.post("/system/news/addNews",this.editForm).then(resp=>{
                    this.$message.success("添加成功");
                });
            },
        }
    }
</script>

<style scoped>
    html,body,#app{
        margin: 0px;
        padding: 0px;
    }
    #app{
        width: 500px;
        padding-left: 350px;
        /*margin-left: 200px;*/
    }
    /*.avatar-uploader .el-upload {*/
    /*    border: 1px dashed #d9d9d9;*/
    /*    border-radius: 6px;*/
    /*    cursor: pointer;*/
    /*    position: relative;*/
    /*    overflow: hidden;*/
    /*}*/
    /*.avatar-uploader .el-upload:hover {*/
    /*    border-color: #409EFF;*/
    /*}*/
    /*.avatar-uploader-icon {*/
    /*    font-size: 28px;*/
    /*    color: #8c939d;*/
    /*    width: 178px;*/
    /*    height: 178px;*/
    /*    line-height: 178px;*/
    /*    text-align: center;*/
    /*}*/
    /*.avatar {*/
    /*    width: 178px;*/
    /*    height: 178px;*/
    /*    display: block;*/
    /*}*/
    /*.el-header, .el-footer {*/
    /*    background-color: #B3C0D1;*/
    /*    color: #333;*/
    /*    text-align: center;*/
    /*    line-height: 60px;*/
    /*}*/

    /*.el-aside {*/
    /*    background-color: #D3DCE6;*/
    /*    color: #333;*/
    /*    text-align: center;*/
    /*    line-height: 500px;*/
    /*}*/

    /*.el-main {*/
    /*    background-color: #E9EEF3;*/
    /*    color: #333;*/
    /*    text-align: center;*/
    /*}*/

    /*body > .el-container {*/
    /*    margin-bottom: 40px;*/
    /*}*/
    /*.el-container:nth-child(5) .el-aside,*/
    /*.el-container:nth-child(6) .el-aside {*/
    /*    line-height: 260px;*/
    /*}*/

    /*.el-container:nth-child(7) .el-aside {*/
    /*    line-height: 320px;*/
    /*}*/

</style>